<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面板 -->
    <el-card>
      <el-row :gutter="20">
         <el-col :span="16">
          <el-input placeholder="请输入内容"><el-button slot="append" icon='el-icon-search'></el-button></el-input>
         </el-col>
         <el-col :span="4">
          <el-button type="primary" @click="addBox = true">添加用户</el-button>
         </el-col>
      </el-row>
      <!-- //表格 -->
          <el-table :data="userList" border stripe>
            <el-table-column type='index' label="序号"></el-table-column>
            <!-- <el-table-column prop="id" label="序号"></el-table-column> -->
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="mobile" label="电话"></el-table-column>
            <el-table-column prop="role_name" label="权限"></el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <!-- {{scope.row.mg_state}} -->
                <el-switch v-model="scope.row.mg_state"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                
               <el-button size="mini" type="primary" icon='el-icon-edit'  @click="userupdlist(scope.row.id)"></el-button>

                 <el-button size="mini" type="danger" icon='el-icon-delete' @click="getUserDel(scope.row.id)"></el-button>

                 <el-tooltip class="item" effect="dark" content="给用户分配角色" placement="top">
                <el-button size="mini" type="warning" icon='el-icon-setting' @click="showRole(scope.row)"></el-button>
                 </el-tooltip>

                </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
           :current-page="queryInfo.pagenum" :page-sizes="[2, 5, 10, 20]" :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>
    </el-card>


    <!-- 添加用户弹出框 -->
    <el-dialog title="新增用户" :visible.sync="addBox">
      <el-form :model="addForm">
      <el-form-item   prop="username">
        <label for="">用户名</label>
        <el-input  v-model="addForm.username" ></el-input>
      </el-form-item>
      <el-form-item   prop="password">
        <label for="">密码</label>
        <el-input  type="password" v-model="addForm.password" ></el-input>
      </el-form-item>
      <el-form-item   prop="email">
        <label for="">邮箱</label>
        <el-input  v-model="addForm.email" ></el-input>
      </el-form-item>
      <el-form-item   prop="mobile">
        <label for="">电话号码</label>
        <el-input  v-model="addForm.mobile" ></el-input>
      </el-form-item>
      </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="addBox=false">取 消</el-button>
          <el-button type="primary" @click="getUserAdd">确 定</el-button>
       </div>
    </el-dialog>
    <!-- 修改用户弹出框 -->
    <el-dialog title="修改用户" :visible.sync="updateBox">
      <el-form :model="updateForm">
      <el-form-item   prop="username">
        <label for="">id</label>
        <el-input  v-model="updateForm.id" ></el-input>
      </el-form-item>
      <el-form-item   prop="email">
        <label for="">邮箱</label>
        <el-input  v-model="updateForm.email" ></el-input>
      </el-form-item>
      <el-form-item   prop="mobile">
        <label for="">电话号码</label>
        <el-input  v-model="updateForm.mobile" ></el-input>
      </el-form-item>
      </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="updateBox=false">取 消</el-button>
           <!-- <template slot-scope="scope"> -->
          <el-button type="primary" @click="getUserUpdate()">确 定</el-button>
           <!-- </template> -->
       </div>
    </el-dialog>

     <!-- 角色分配框框 -->
    <el-dialog title="分配角色用户" :visible.sync="roleBox">
        <p>当前用户:{{userInfo.username}}</p>
        <p>当前角色:{{userInfo.role_name}}</p>
        <el-select v-model="setRoleid" placeholder="请选择">
           <el-option v-for="item in roleList" :label='item.roleName' :key="item.id" :value="item.id">
           </el-option>
       </el-select>
       <div slot="footer" class="dialog-footer">
          <el-button @click="roleBox=false">取 消</el-button>
           <!-- <template slot-scope="scope"> -->
          <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
           <!-- </template> -->
       </div>
    </el-dialog>
  </div>
</template>

<script>
export default{
  data(){
    return{
      userList:[],//用户列表
      total:0,
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:5
      },
      // 弹出框默认为关闭
      addBox: false,
      updateBox:false,
      roleBox:false,
      addForm:{
        username:'',
        password:'',
        email:'',
        mobile:''
      },
      // 保存修改数据
      updateForm:{
        id:'',
        email:'',
        mobile:'',
        rid:''
      },
      userInfo:{},//分配角色用户信息
      roleList:[],//所有角色
      setRoleid:''
    }
  },
  created(){
    this.getUserList()//ajax 获取用户数据
  },
  methods:{
   async getUserList(){
      let ret=await this.$http.get('/users',({params:this.queryInfo}));
      if(ret.meta.status !=200){
        return this.$message.error(ret.meta.msg)
      }
      // 保存数据
      this.userList=ret.data.users;
      this.total=ret.data.total;
    },
    //用户添加
    async getUserAdd(){
      this.addBox=false;
      let ret=await this.$http.post('/users',this.addForm)
      this.getUserList()//刷新
      //成功失败提示
      this.boxMsg(ret.meta.status,201,ret.meta.msg);
      //  重置表单
      this.addForm={}
    },
    //用户删除
    async getUserDel(id){
      // 删除提示
      let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(ok!='confirm'){
          return this.$message.info('取消删除')
        }
      let ret=await this.$http.delete('/users/'+id);
      this.getUserList()//刷新
      //成功失败提示
      this.boxMsg(ret.meta.status,200,ret.meta.msg);
    },
    //用户修改   根据 ID 查询用户信息
   async userupdlist(id){
      this.updateBox=true;
      let ret=await this.$http.get('/users/'+id);
      this.updateForm=ret.data
    },
    //修改
    async getUserUpdate(){
      let ret=await this.$http.put(`users/${this.updateForm.id}`,this.updateForm);
      //成功失败提示
      this.boxMsg(ret.meta.status,200,ret.meta.msg);

      this.getUserList()//刷新
      this.updateBox=false;
      
    },
    //分配角色
    async showRole(row){
      this.roleBox=true;
      this.userInfo=row;
      // 查询所有角色信息
      let ret=await this.$http.get('/roles');
      this.roleList=ret.data;
    },
    async saveRoleInfo(){
      let uid=this.userInfo.id;
      let rid=this.setRoleid
      let ret=await this.$http.put(`/users/${uid}/role`,{rid})
      //成功失败提示
      this.boxMsg(ret.meta.status,200,ret.meta.msg);
        this.roleBox=false;
        this.getUserList()//刷新
    },
    handleSizeChange(size){
      // console.log('变化每页条数',size);
      this.queryInfo.pagesize=size
      this.getUserList()//刷新
    },
    handleCurrentChange(p){
      // console.log('变化页码',p);
      this.queryInfo.pagenum=p;
      this.getUserList()//刷新
    },
    //成功失败提示方法
    boxMsg(a,b,msg){
      if(a !=b){
        return this.$message.error(msg);
      }
      // 成功提示
      this.$message({
           message: msg,
          type: 'success'
        });
    }
  }
}

</script>

<style>

</style>